<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script> -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat">
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato">
    <script src="//ajax.googleapis.bootcss.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style type="text/css">
        body {
            font: 400 15px/1.8 Lato, sans-serif;
            color: #777;
        }
        /* Overwrite default styles of h3 and h4 */
        h3, h4 {
            margin: 10px 0 30px 0;
            letter-spacing: 10px;
            font-size: 20px;
            color: #111;
        }
        /* Remove rounded borders on input fields */
        .form-control {
            border-radius: 0;
        }
        /* Disable the ability to resize textareas */
        textarea {
            resize: none;
        }
        .container {
            padding: 80px 120px;
        }
        .person {
            border: 10px solid transparent;
            margin-bottom: 25px;
            width: 80%;
            height: 80%;
            opacity: 0.7;
        }
        .person:hover {
            border-color: #f1f1f1;
        }
        .carousel-inner img {
            -webkit-filter: grayscale(90%);
            filter: grayscale(90%); /* make all photos black and white */
            width: 100%; /* Set width to 100% */
            margin: auto;
        }
        .carousel-caption h3 {
            color: #fff !important;
        }
        .bg-1 {
            background: #2d2d30;
            color: #bdbdbd;
        }
        .bg-1 h3 {
            color: #fff;
        }
        .bg-1 p {
            font-style: italic;
        }
        /* Remove rounded borders from list */
        .list-group-item:first-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .list-group-item:last-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        /* Remove border and add padding to thumbnails */
        .thumbnail {
            padding: 0 0 15px 0;
            border: none;
            border-radius: 0;
        }
        .thumbnail p {
            margin-top: 15px;
            color: #555;
        }
        /* Black buttons with extra padding and without rounded borders */
        .btn {
            padding: 10px 20px;
            background-color: #333;
            color: #f1f1f1;
            border-radius: 0;
            transition: .2s;
        }
        /* On hover, the color of .btn will transition to white with black text */
        .btn:hover, .btn:focus {
            border: 1px solid #333;
            background-color: #fff;
            color: #000;
        }
        /* Add a dark gray background color to the modal header and center text */
        .modal-header, h4, .close {
            background-color: #333;
            color: #fff !important;
            text-align: center;
            font-size: 30px;
        }
        .modal-header, .modal-body {
            padding: 40px 50px;
        }
        .nav-tabs li a {
            color: #777;
        }
        #googleMap {
            width: 100%; /* Span the entire width of the screen */
            height: 400px; /* Set the height to 400 pixels */
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%); /* Change the color of the map to black and white */
        }
        /* Add a dark background color with a little bit see-through */
        .navbar {
            font-family: Montserrat, sans-serif;
            margin-bottom: 0;
            background-color: #2d2d30;
            border: 0;
            font-size: 11px !important;
            letter-spacing: 4px;
            opacity: .9;
        }
        /* Add a gray color to all navbar links */
        .navbar li a, .navbar .navbar-brand {
            color: #d5d5d5 !important;
        }
        /* On hover, the links will turn white */
        .navbar-nav li a:hover {
            color: #fff !important;
        }
        /* The active link */
        .navbar-nav li.active a {
            content: #fff !important;
            background-color: #29292c !important;
        }
        /* Remove border color from the collapsible button */
        .navbar-default .navbar-toggle {
            border-color: transparent;
        }
        /* Dropdown */
        .open .dropdown-toggle {
            color: #fff;
            background-color: #555 !important;
        }
        /* Dropdown links */
        .dropdown-menu li a {
            color: #000 !important;
        }
        /* On hover, the dropdown links will turn red */
        .dropdown-menu li a:hover {
            background-color: red !important;
        }
        /* Add a dark background color to the footer */
        footer {
            background-color: #2d2d30;
            color: #f5f5f5;
            padding: 32px;
        }
        footer a {
            color: #f5f5f5;
        }
        footer a:hover {
            color: #777;
            text-decoration: none;
        }
        @media (max-width: 600px) {
            .carousel-caption {
                display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
            }
        }
    </style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#myPage">Logo</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#home">HOME</a></li>
                    <li><a href="#band">BAND</a></li>
                    <li><a href="#tour">TOUR</a></li>
                    <li><a href="#contact">CONTACT</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="javascript:;">MORE <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="javascript:;">Merchandise</a></li>
                            <li><a href="javascript:;">Extras</a></li>
                            <li><a href="javascript:;">Media</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:;"><span class="glyphicon glyphicon-search"></span></a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="carousel slide" id="myCarousel" data-ride="carousel">
        <ol class="carousel-indicators">
            <li class="active" data-target="#myCarousel" data-slide-to="0"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="imgs/ny.jpg" alt="New York">
                <div class="carousel-caption">
                    <h3>New York</h3>
                    <p>The atmosphere in New York is lorem ipsum.</p>
                </div>
            </div>
            <div class="item">
                <img src="imgs/chicago.jpg" alt="Chicago">
                <div class="carousel-caption">
                    <h3>Chicago</h3>
                    <p>Thank you, Chicago - A night we won't forget.</p>
                </div>
            </div>
            <div class="item">
                <img src="imgs/la.jpg" alt="Los Angeles">
                <div class="carousel-caption">
                    <h3>LA</h3>
                    <p>Even though the traffic was a mess, we had the best time.</p>
                </div>
            </div>
        </div>

        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <div class="container text-center" id="band">
        <h3>THE BAND</h3>
        <p><em>We love music!</em></p>
        <p>We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <br>
        <div class="row">
            <div class="col-sm-4">
                <p class="text-center"><strong>Name</strong></p>
                <br>
                <a href="#demo" data-toggle="collapse">
                    <img class="img-circle person" src="imgs/bandmember.jpg" alt="Random Name" width="255" height="255">
                </a>
                <div class="collapse" id="demo">
                    <p>Guitarist and Lead Vocalist</p>
                    <p>Loves long walks on the beach</p>
                    <p>Member since 1988</p>
                </div>
            </div>
            <div class="col-sm-4">
                <p class="text-center"><strong>Name</strong></p>
                <br>
                <a href="#demo2" data-toggle="collapse">
                    <img class="img-circle person" src="imgs/bandmember.jpg" alt="Random Name" width="255" height="255">
                </a>
                <div class="collapse" id="demo2">
                    <p>Drummer</p>
                    <p>Loves drummin'</p>
                    <p>Member since 1988</p>
                </div>
            </div>
            <div class="col-sm-4">
                <p class="text-center"><strong>Name</strong></p>
                <br>
                <a href="#demo3" data-toggle="collapse">
                    <img class="img-circle person" src="imgs/bandmember.jpg" alt="Random Name" width="255" height="255">
                </a>
                <div class="collapse" id="demo3">
                    <p>Base player</p>
                    <p>Loves math</p>
                    <p>Member since 2005</p>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-1" id="tour">
        <div class="container">
            <h3 class="text-center">TOUR DATES</h3>
            <p class="text-center">Lorem ipsum we'll play you some music.<br> Remember to book your tickets!<br><br></p>
            <ul class="list-group">
                <li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
                <li class="list-group-item">October <span class="label label-danger">Sold Out!</span></li>
                <li class="list-group-item">November <span class="badge">3</span></li>
            </ul>
            <div class="row text-center">
                <div class="col-sm-4">
                    <div class="thumbnail">
                        <img src="imgs/paris.jpg" alt="Paris">
                        <p><strong>Paris</strong></p>
                        <p>Sun. 27 November 2016</p>
                        <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="thumbnail">
                        <img src="imgs/newyork.jpg" alt="New York">
                        <p><strong>New York</strong></p>
                        <p>Mon. 28 November 2016</p>
                        <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="thumbnail">
                        <img src="imgs/sanfran.jpg" alt="San Francisco">
                        <p><strong>San Francisco</strong></p>
                        <p>Tue. 29 November 2016</p>
                        <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="myModal" role="dialog">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button class="close" type="button" data-dismiss="modal">&times;</button>
                            <h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
                        </div>
                        <div class="modal-body">
                            <form>
                                <div class="form-group">
                                    <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
                                    <input class="form-control" type="number" id="psw" name="psw" placeholder="How many?">
                                </div>
                                <div class="form-group">
                                    <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
                                    <input class="form-control" type="text" id="usrname" name="usrname" placeholder="Enter email">
                                </div>
                                <button class="btn btn-block" type="submit">Pay <span class="glyphicon glyphicon-ok"></span></button>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-danger pull-left" data-dismiss="modal">
                                <span class="glyphicon glyphicon-remove"></span> Cancel
                            </button>
                            <p>Need <a href="javascript:;">help?</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container" id="contact">
        <h3 class="text-center">Contact</h3>
        <p class="text-center"><em>We love our fans!</em></p>
        <div class="row test">
            <div class="col-md-4">
                <p>Fan? Drop a note.</p>
                <p><span class="glyphicon glyphicon-map-marker"></span> Ji'nan, CN</p>
                <p><span class="glyphicon glyphicon-phone"></span> Phone: +86 18818818888</p>
                <p><span class="glyphicon glyphicon-envelope"></span> Email: mail@mail.com</p>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <div class="col-sm-6 form-group">
                        <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
                    </div>
                    <div class="col-sm-6 form-group">
                        <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
                    </div>
                </div>
                <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
                <br>
                <div class="row">
                    <div class="col-md-12 form-group">
                        <button class="btn btn-default pull-right" type="submit">Send</button>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <h3 class="text-center">From The Blog</h3>
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#home">Mike</a></li>
            <li><a data-toggle="tab" href="#menu1">Chandler</a></li>
            <li><a data-toggle="tab" href="#menu2">Peter</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade in active" id="home">
                <h2>Mike Ross, Manager</h2>
                <p>Man, we've been on the road for some time now. Looking forward to lorem ipsum.</p>
            </div>
            <div class="tab-pane fade" id="menu1">
                <h2>Chandler Bing, Guitarist</h2>
                <p>Always a pleasure people! Hope you enjoyed it as much as I did. Could I BE.. any more pleased?</p>
            </div>
            <div class="tab-pane fade" id="menu2">
                <h2>Peter Griffin, Bass player</h2>
                <p>I mean, sometimes I enjoy the show, but other times I enjoy other things.</p>
            </div>
        </div>
    </div>

    <div id="googleMap"></div>

    <!-- Add Google Maps -->
    <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyDkbju4wBmyo4NH-QoCZaTLNVRCRvo-8Ew"></script>
    <script type="text/javascript">
        var myCenter = new google.maps.LatLng(36.5551882, 116.8197402);
        function initialize() {
            var mapProp = {
                center: myCenter,
                zoom: 10,
                scrollwheel: false,
                draggable: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
            var marker = new google.maps.Marker({
                position: myCenter,
            });
            marker.setMap(map);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    <footer class="text-center">
        <a class="up-arrow" href="#myPage" data-toggle="tooltip" title="TO TOP">
            <span class="glyphicon glyphicon-chevron-up"></span>
        </a>
        <br><br>
        <p>Bootstrap Theme Made By <a href="//zhanglianxin.github.io" data-toggle="tooltip">zhanglianxin</a></p>
    </footer>
    <script type="text/javascript">
        $(document).ready(function() {
            // Initialize Tooltip
            $('[data-toggle="tooltip"]').tooltip();
            // Add smooth scrolling to all links in navbar + footer link
            $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
                // Prevent default anchor click behavior
                event.preventDefault();
                // Store hash
                var hash = this.hash;
                // Using jQuery's animate() method to add smooth page scroll
                // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
                $('html, body').animate({
                    scrollTop: $(hash).offset().top
                }, 900, function() {
                    // Add hash (#) to URL when done scrolling (default click behavior)
                    window.location.hash = hash;
                });
            });
        });
    </script>
</body>
</html>
